component.employees

employees

Employee Directory

1490 Employees Found
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz

Adrian Demian

Senior Designer

4 projects

30%

Profile
  • contac@mosaicpro.biz
  • 00353 9191238101
  • mosaicpro
About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Skills
100%
HTML
90%
CSS
93%
jQuery
79%
PHP
20%
WP
MosaicPro Team (2 people)
  • 1Adrian DemianSenior Designer
  • 2Laza BogdanSenior Developer
<h2 class="margin-none separator bottom"><i class="icon-group text-primary icon-fixed-width"></i> Employee Directory</h2>
			<div class="widget widget-heading-simple widget-body-gray widget-employees">
				<div class="widget-body padding-none">
					
					<div class="row">
						<div class="col-md-4 listWrapper">
							<div class="innerAll">
								<form autocomplete="off" class="form-inline">
									<div class="widget-search separator bottom">
										<button type="button" class="btn btn-default pull-right"><i class="icon-search"></i></button>
										<div class="overflow-hidden">
											<input type="text" value="" class="form-control" placeholder="Find someone ..">
										</div>
									</div>
									<select style="width: 100%;">
						               <optgroup label="Department">
						                   <option value="design">Design</option>
						                   <option value="development">Development</option>
						               </optgroup>
									</select>
								</form>
							</div>
							<span class="results">1490 Employees Found <i class="icon-circle-arrow-down"></i></span>
							<ul class="list unstyled">
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li class="active">
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
																<li>
									<div class="media innerAll">
										<div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<span class="strong">Adrian Demian</span>
											<span class="muted">contact@mosaicpro.biz</span>
											<i class="icon-envelope"></i>
											<i class="icon-phone"></i> 
											<i class="icon-skype"></i> 
										</div>
									</div>
								</li>
															</ul>
						</div>
						<div class="col-md-8 detailsWrapper">
							<div class="ajax-loading hide">
								<i class="icon-spinner icon-spin icon-4x"></i>
							</div>
							<div class="innerAll">
								<div class="title">
									<div class="row">
										<div class="col-md-8">
											<h3 class="text-primary">Adrian Demian</h3>
											<span class="muted">Senior Designer</span>
										</div>
										<div class="col-md-4 text-right">
											<p class="muted">4 projects <a href=""><i class="icon-circle-arrow-right"></i></a></p>
											<div class="margin-bottom-none progress progress-small progress-inverse count-outside">
												<div class="count">30%</div>
												<div class="progress-bar" role="progressbar" aria-valuenow="30" style="width: 30%;"></div>
											</div>
										</div>
									</div>
								</div>
								<hr/>
								<div class="body">
									<div class="row">
										<div class="col-md-4 overflow-hidden">
											<!-- Profile Photo -->
											<div><a href="" class="thumb inline-block"><img src="../assets/images/avatar-2-large.jpg" alt="Profile" /></a></div>
											<div class="separator bottom"></div>
											<!-- // Profile Photo END -->
											<ul class="icons-ul separator bottom">
												<li><i class="icon-envelope icon-li icon-fixed-width"></i> contac@mosaicpro.biz</li>
												<li><i class="icon-phone icon-li icon-fixed-width"></i> 00353 9191238101</li>
												<li><i class="icon-skype icon-li icon-fixed-width"></i> mosaicpro</li>
											</ul>
										</div>
										<div class="col-md-8 padding-none">
											<h5 class="strong">About</h5>
											<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
											<div class="row">
												<div class="col-md-4 padding-none">
													<h5 class="strong">Reports</h5>
													<a href="" class="btn btn-primary btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> June</a>
													<a href="" class="btn btn-inverse btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> May</a>
													<a href="" class="btn btn-inverse btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> April</a>
													<div class="separator bottom"></div>
												</div>

												<div class="col-md-7 col-md-offset-1 padding-none">
													<h5 class="strong">Skills</h5>
													<div class="progress progress-mini count-outside-primary add-outside">
														<div class="count">100%</div>
														<div class="progress-bar progress-bar-primary" style="width: 100%;"></div>
														<div class="add">HTML</div>
													</div>
													<div class="progress progress-mini count-outside-primary add-outside">
														<div class="count">90%</div>
														<div class="progress-bar progress-bar-primary" style="width: 90%;"></div>
														<div class="add">CSS</div>
													</div>
													<div class="progress progress-mini count-outside-primary add-outside">
														<div class="count">93%</div>
														<div class="progress-bar progress-bar-primary" style="width: 93%;"></div>
														<div class="add">jQuery</div>
													</div>
													<div class="progress progress-mini count-outside-primary add-outside">
														<div class="count">79%</div>
														<div class="progress-bar progress-bar-primary" style="width: 79%;"></div>
														<div class="add">PHP</div>
													</div>
													<div class="progress progress-mini count-outside add-outside">
														<div class="count">20%</div>
														<div class="progress-bar" style="width: 20%;"></div>
														<div class="add">WP</div>
													</div>

													<div class="separator bottom"></div>
												</div>
											</div>
											<h5 class="text-uppercase strong text-primary"><i class="icon-group text-regular icon-fixed-width"></i> MosaicPro <span class="text-lowercase strong padding-none">Team</span> <span class="text-lowercase padding-none">(2 people)</span></h5>
											<ul class="team">
												<li><span class="crt">1</span><span class="strong">Adrian Demian</span><span class="muted">Senior Designer</span></li>
												<li><span class="crt">2</span><span class="strong">Laza Bogdan</span><span class="muted">Senior Developer</span></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<!-- // Widget END -->
			

Code

@import "assets/components/modules/admin/employees/assets/less/employees.less";
@import "assets/components/modules/admin/ui/progress-bars/assets/less/progress-bars.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "http://localhost/shared/components/modules/admin/forms/elements/select2/assets/lib/css/select2.css";
@import "http://localhost/shared/components/modules/admin/forms/elements/select2/assets/custom/less/select2.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/employees/assets/js/employees.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/select2/assets/lib/js/select2.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/select2/assets/custom/js/select2.init.js?v=v1.2.3"></script>